<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 后端管理系统</title>
    <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="./js/html5.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
</head>
<body id="container">
<nav>
    <ul>
        <li>
            <i class="fa fa-navicon fa-lg toggle-nav" style="font-size: 25px;"></i>
            <a href="" class="a-logo">水晶球教育后台管理系统</a>
        </li>
        <li class="nav-li-manage">
            <img class="manage_avatar" src="http://demo.mycodes.net/houtai/AdminLTE/dist/img/user2-160x160.jpg" alt="">
            <a href="#">管理员</a>
            <span class="fa  fa-caret-right arrow" style="float: right;line-height: 55px"></span>
            <ul>
                <li>个人资料</li>
                <li>修改密码</li>
                <li>设置</li>
                <li>登出</li>
            </ul>
        </li>
    </ul>
</nav>
<section>
    <div id="sidebar">
        <ul class="sidebar-menu">
            <li>
                <a href="index.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="tab.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>tab页</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>系统管理</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="manage_user.html">系统用户管理</a></li>
                    <li><a class="" href="users.html">用户管理</a></li>
                </ul>
            </li>
            <li>
                <a href="awesome.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>font-awesome</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>常用 UI组件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="button.html">按钮</a></li>
                    <li><a class="" href="form.html">表单</a></li>
                    <li><a class="" href="table.html">表格</a></li>
                </ul>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>Jquery 插件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="datatables.html">datatables 表格</a></li>
                    <li><a class="" href="select2.html">select2 下拉框</a></li>
                    <li><a class="" href="layui.html">layui 弹出层</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <section class="wrapper toggle-wrapper">
        <style>
            .container-fluid .row {
                text-align: center;
                margin: 10px 0;;
            }

            .container-fluid .row > div {
                border: 1px solid #ccc;
            }

            .container-fluid .row {
                margin: 50px 0;
            }

            select {
                width: 100%;
            }
        </style>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <h1>
                        <a href="http://layer.layui.com/"> layui </a>
                    </h1>
                </div>
            </div>
            <div class="row">
                <button id="test1" class="btn btn-default btn-danger">小小提示层</button>
                <button id="test2" class="btn btn-default btn-danger">页面层</button>
                <button id="test3" class="btn btn-default btn-danger">iframe</button>
                <button id="test4" class="btn btn-default btn-danger">您是如何看待前端开发</button>
            </div>
            <div class="row">
            </div>
        </div>
    </section>
</section>
</body>
<script src="js/jquery.js"></script>
<script src="js/zhao.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    $('#test1').on('click', function () {
        layer.msg('这是一个小小的弹窗');
    });
    $('#test2').on('click', function () {
        layer.open({
            type: 1,
            area: ['600px', '360px'],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">弹出层内容\<\/div>'
        });
    });
    $('#test3').on('click', function () {
        layer.open({
            type: 2,
            title: 'iframe父子操作',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['800px', '520px'],
            content: 'button.html'
        });
    });
    $('#test4').on('click', function () {
        layer.confirm('您是如何看待前端开发？', {
            btn: ['重要', '奇葩'] //按钮
        }, function () {
            layer.msg('的确很重要', {icon: 1});
        }, function () {
            layer.msg('也可以这样', {
                time: 20000, //20s后自动关闭
                btn: ['明白了', '知道了']
            });
        });
    });
</script>
</html>